<template>
    <div class="select-sex">
        <!-- 顶部背景图片 -->
        <div class="top-background">
            <img src="../assets/top.png" class="img-top">
            <div class="title">请选择您的性别</div>
        </div>
        <!-- 性别选择 -->
        <div class="sex-select">
            <!-- 男生 -->
            <div class="sex-item" @click="selectSex('male')">
                <img src="../assets/male.jpeg" alt="男生" class="sex-img">
                <div class="male">高富帅</div>
                <div class="all-males">共{{allMales}}张纸条</div>
            </div>
            <!-- 女生 -->
            <div class="sex-item" @click="selectSex('female')">
                <img src="../assets/flmale.jpeg" alt="女生" class="sex-img">
                <div class="male">白富美</div>
                <div class="all-males">共{{allFemales}}张纸条</div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 引入pinia
import { useUserSexStore } from '@/store';
// 引入props
import { defineProps, onMounted, ref } from 'vue';

import { getManList, getFemaleList } from '@/api/index.js';

const allMales = ref(0);
const allFemales = ref(0);

// 接收父组件传来的数据
const props = defineProps({
    setShowMale: Function,
});
// 使用pinia
const userSexStore = useUserSexStore();

// 选择性别
const selectSex = (selectedSex) => {
    userSexStore.changesex(selectedSex);
    // 调用父组件的方法,选择要展示的组件
    props.setShowMale('extract')
}
// 初始化
onMounted( async() => {
    const resultMale = await getManList();
    const resultFemale = await getFemaleList();
    allMales.value = resultMale.data;
    allFemales.value = resultFemale.data;
})

</script>

<style scoped>
.select-sex {
    width: 80%;
    height: auto;
    background-color: #fff;
    border-radius: 15px;
    position: relative; /* 相对定位 */
}

.top-background {
    position: relative; /* 相对定位 */
}

.img-top {
    width: 80%;
    height: auto;
    z-index: -1;
}

.title {
    position: absolute; /* 绝对定位 */
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 90%;
    font-weight: bold;
}

/* 性别选择 */
.sex-select {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/* 性别头像 */
.sex-img {
    width: 75px;
    height: 76px;
    border-radius: 50%;
    margin-top: 10px;
}

.male {
    margin-top: 20px;
    font-size: 14px;
    color: #303133;
}

/* 纸条数 */
.all-males {
    margin-top: 10px;
    font-size: 12px;
    color: #a1a1a1;
    margin-bottom: 35px;
}
</style>
